---
title: useDebouncedFunction
description: Creates a function that will only be called if it has not been called again for X milliseconds.
docType: API Docs
docGroup: Hooks
group: Actions
hooks: [useDebouncedFunction]
---

# useDebouncedFunction [$SOURCE](packages/core/src/useDebouncedFunction.ts)

```ts disableTransform
function useDebouncedFunction<F extends AnyFunction>(
  func: F,
  wait: number
): DebouncedFunction<F>;
```

Creates a function that will only be called if it has not been called again
for X milliseconds.

## Example Usage

```tsx
function Example() {
  const [options, setOptions] = useState<readonly string[]>([]);
  const unmounted = useUnmounted();
  const search = useDebouncedFunction(async (query: string) => {
    const response = await fetch(`/api/search`, {
      method: "POST",
      body: JSON.stringify({ query }),
    });
    const json = await response.json();
    if (!unmounted.current) {
      setOptions(json);
    }
  }, 500);

  return (
    <Autocomplete
      {...props}
      onChange={(event) => search(event.currentTarget.value)}
    />
  );
}
```

## Parameters

- `func` - The function to debounce
- `wait` - The amount of time in milliseconds to debounce the function call

## Returns

```ts disableTransform
export type DebouncedFunction<F extends AnyFunction> = CancelableFunction<
  (...args: Parameters<F>) => void
>;
```

## See Also

- [useAsyncFunction](./use-async-function)
- [useThrottledFunction](./use-throttled-function)
